<template>
  <div class="contact">
    <main>
      <van-field
        v-model="value"
        readonly
        clickable
        @touchstart.stop="show = true"
      />
      <van-number-keyboard
        v-model="value"
        :show="show"
        :maxlength="12"
        :safe-area-inset-bottom='true'
        @blur="show = false"
      />
    </main>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const show = ref(true)
    const value = ref('400 788 78880')
    return {
      show,
      value
    }
  }
}
</script>

<style lang='scss' scoped>
.contact {
  width: 100%;
  height: 100%;
}
main {
  .van-field {
    width: 90%;
    height: 80px;
    line-height: 80px;
    font-size: 46px;
    margin: 0 auto;
    text-align: center;
  }
}
</style>
